<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入样式 -->
<link rel="stylesheet" href="plugins/element-ui/index.css">
<link rel="stylesheet" href="styles/common/common.css">
<style>
    .container {
        width: 100%;
    }
</style>

<div id="member-app" class="dashboard-container">
    <div class="container">
        <div class="tableBar">
            <div class="el-input el-input--prefix el-input--suffix" style="width: 250px;">
                <input type="text" autocomplete="off" placeholder="请输入公告内容" class="el-input__inner">
                <span class="el-input__prefix">
                    <i class="el-input__icon el-icon-search" style="cursor: pointer;"></i>
                </span>
            </div>
            <button type="button" class="el-button el-button--primary" id="btn-search">
                <span>查询</span>
            </button>
            <div class="tableLab" >
                <button type="button" class="el-button el-button--primary el-button--add">
                    <span>+ 添加内容</span>
                </button>
               <!-- <button type="button" class="el-button el-button&#45;&#45;primary el-button&#45;&#45;update" >
                    <span> 修改内容</span>
                </button>-->
                <button type="button" class="el-button el-button--primary el-button-delete">
                    <span> 删除内容</span>
                </button>
            </div>
        </div>
        <div class="el-table tableBox el-table--fit el-table--striped el-table--enable-row-hover">
            <div class="hidden-columns">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="el-table__header-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
                    <thead class="">
                        <tr class="">
                            <th colspan="1" rowspan="1" class="el-table_1_column_1   #tbody  is-leaf" style="width: 25px;">
                                <div class="cell">
                                    <label class="el-checkbox is-disabled">
                                        <span class="el-checkbox__input">
                                            <input type="checkbox" value="" onchange='commonChoiceAll()'>
                                        </span>
                                    </label>
                                </div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
                                <div class="cell">内容</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
                                <div class="cell">公告时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_4 is-leaf">
                                <div class="cell">创建时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_5 is-leaf">
                                <div class="cell">修改时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_6 is-center is-leaf">
                                <div class="cell">创建用户</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_7 is-center is-leaf">
                                <div class="cell">修改用户</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_8 is-leaf">
                                <div class="cell">状态</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_9 is-center is-leaf" style="width: 153px">
                                <div class="cell">操作</div>
                            </th>
                        </tr>
                   <!-- </thead>
                    <tbody id="tbodyId">

                    </tbody>-->
                </table>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                    <tbody id="tbodyId"></tbody>
                </table>
                <div class="el-table__empty-block" style="height: 100%; width: 100%;display: none">
                    <span class="el-table__empty-text">暂无数据</span>
                </div>
            </div>
            <div class="el-table__column-resize-proxy" style="display: none;"></div>
        </div>
        <div class="pageList el-pagination" id="pageId">

        </div>
        </div>
    </div>
</div>
<script>
    $(function() {
       /* $(".el-button--add").on("click",addPage);
        $(".el-button--update").on("click",upDate);*/
        $("#cIframe").data("notId","");
        $(".tableBar").on("click",".el-button--add,.el-button--update",addPage);
        $(".el-button--primary").on("click",doGetObjects);
        $("#btn-search").on("click",doGetObjects);
        $(".el-button-delete").on("click",deletePage);
        //先加载数据，再查询数据
        $("#pageId").load("page/page",function(){
            doGetObjects();
        })
    })
    //初始加载
    function doGetObjects(){
        if($(this).prop("id")=="btn-search"){
            debugger
            $("#pageId").data("curPage", 1);
        }
        var url="notice/findAll";
        var curPage = $("#pageId").data("curPage");
        var params = {
            "noticeContent" : $(".el-input__inner").val(),
            curPage :curPage ? curPage : 1,
            pageSize : 10
        };
        $.get(url,params,function(result){
            if(result.state == 0){
                commonShowTips(result.message);
            }else{
                loadRoleData(result.data.pageData);//加载表格主体数据
                setPageData(result.data);//分页
            }
        })
    }

    //删除
    function deletePage(){
        var checkboxs = $("#tbodyId input[type='checkbox']:checked");
        var ids = [];
        for (var i = 0; i < checkboxs.length; i++) {
            ids.push(checkboxs.eq(i).val());
        }
        if(!ids.length){
            commonShowTips("请至少选择1条要删除的商品数据！");
            return;
        }
        //二次删除确认
        if(!confirm("确认删除吗?")){
            return;
        }
        var url = "notice/deleteNotice";
        var param ={ids:ids};
        $.get(url,param,function(result){
                commonShowTips("成功修改删除状态" + result.data + "条数据！");
                doGetObjects();
        })
    }
    //跳转或添加
    function addPage() {
        var bool = $(this).hasClass("el-button--update");
        if(bool){
            var radioCheck = $(this).parents("tr").find("input[type='checkbox']");
            if (!radioCheck.length){
                commonShowTips("请选择要修改的数据")
                return;
            }
            $("#cIframe").data("notId",radioCheck.val());
            //拿到当前行绑定的行数据
            var notData = radioCheck.parents("tr").data("notice");
            //行数据绑定到大盒子上，为了修改页面拿到数据
            $("#cIframe").data("notice",notData);
        }
       /* var url = "notice/add";*/
        $("#cIframe").load("notice/add",function(){

        });
    }

    function loadRoleData(data) {
        var tbody = $("#tbodyId");
        tbody.empty();
        for (var i = 0;i < data.length;i++){
            var d = data[i];
            var tr = "<tr>" +
                "<td class='el-table_1_column_1   el-table-column--selection  is-leaf' style='width: 25px;'><div class='cell' style='padding-left: 11px'>" +
                "<label class='el-checkbox'><span class='el-checkbox__input'>" +
                "<input type='checkbox' id='input-data' aria-hidden='false'' value='" + d.id+ "' onchange='commonChoiceThis()' ></span></label></div></td>"
                +"<td class='el-table_1_column_2 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.noticeContent + "</div></td>"
                +"<td class='el-table_1_column_3 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.noticeTime + "</div></td>"
                +"<td class='el-table_1_column_4 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.createdTime+"</div></td>"
                +"<td class='el-table_1_column_5 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.modifiedTime+"</div></td>"
                +"<td class='el-table_1_column_6 is-leaf' colspan='1' rowspan='1'><div class='cell' style='text-align: center;'>"+d.createdUser+"</div></td>"
                +"<td class='el-table_1_column_7 is-leaf' colspan='1' rowspan='1'><div class='cell' style='text-align: center;'>"+d.modifiedUser+"</div></td>"
                +"<td class='el-table_1_column_8 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+(d.noticeState == 1 ? "启用":"禁用")+"</div></td>"
                +"<td class='el-table_1_column_9 is-leaf' colspan='1' rowspan='1' style='width: 153px'><div>"
                +"<button type='button' class='el-button el-button--primary' onclick='changeValid(this)'>"+(d.noticeState?"禁用":"启用")+"</button>"
                +"<button type='button' class='el-button--primary el-button el-button--update continue up'>修改</button></div></td></tr>";
            tbody.append(tr);
            //每一行上面绑定当前行数据
            $("#tbodyId tr").last().data("notice",data[i]);
        }
        $(".el-button--update").on("click", addPage);
    }
    //修改状态
    function changeValid(btn){
        //找到当前行id
        var id =$(btn).parents('tr').find("input").val();
        var url = "notice/updateValId";
        var state = $(btn).text() == '禁用' ? 0 : 1;
        var params = {id : id,noticeState : state};
        $.get(url,params,function(result){
            commonShowTips(result.message);
            $(btn).text(state == 0 ? "启用" : "禁用");
            $(btn).parents('tr').children(":eq(7)").html("<div class='cell'>"+(state == 1 ? "启用":"禁用")+"</div>");
        })
    }
    /**
     * 选中当前多选框事件方法
     */
    function commonChoiceThis() {
        //主体数据部分所有多选框
        var totalInp = $("#tbodyId input[type='checkbox']");
        //主题数据部分所有被选中的多选框
        var totalCkd = $("#tbodyId input[type='checkbox']:checked");
        //title部分多选框（全选，全不选）
        var firstInp = $(".el-checkbox__input input[type='checkbox']").first();
        //如果所有多选框的数量等于被选中多选框的数据，则勾上全选，否则取消全选
        /*if (totalInp.length == totalCkd.length) {
            firstInp.prop("checked",true);
        }else{
            firstInp.prop("checked",false);
        }*/
        firstInp.prop("checked",totalInp.length == totalCkd.length);
    }

    /**
     * 多选框全选事件方法
     */
    function commonChoiceAll() {
        //$():$包起来的是jq对象，是一个dom数组
        //加下标：变成js对象
        var firstInp = $(".el-checkbox__input input[type='checkbox']").first();
        var checked = firstInp[0].checked;//加下标变js对象
        //:gt(0) --->选择下标大于0的元素
        $(".el-checkbox__input input[type='checkbox']:gt(0)").prop("checked", checked);
    }

</script>
<script src="api/member/member.js"></script>